/*logo*/


/*index.html*/
/*第一页*/

.clsLogo{position: absolute; top:6%;left:20px;z-index: 100;}
.p1-2{position: absolute; top:48%;left:30px;z-index: 10}
.p1-3{position: absolute; top:60%;left:50px;}
.p1-4{position: absolute; top:48%;left:30px;}
.p1-5{position: absolute; top:61%; left:45px;z-index: 50;}
.p1-6{position: absolute; top:13%; left:0px;}
.p1-7{position: absolute; top:14%; left:20px;}
.p1-8{position: absolute; top:13%; left:10px;}

.p1-6{-webkit-animation: FadeInT 1s 0.5s ease both; -moz-animation: FadeInT 1s 0.5s ease both;}
.p1-8{-webkit-animation: BounceIn 1s 1s ease both; -moz-animation: MySmallToLarge 1s 1s ease both;}
.p1-7{-webkit-animation: FadeInL 1s 2s ease both; -moz-animation: FadeInL 1s 2s ease both;}
.p1-2{-webkit-animation: MySmallToLarge 1s 2.5s ease both; -moz-animation: MySmallToLarge 1s 2.5s ease both;}
.p1-4{-webkit-animation: MySmallToLarge 1s 2.5s ease both; -moz-animation: MySmallToLarge 1s 2.5s ease both;}
.p1-3{-webkit-animation: FadeInT 1s 3.5s ease both; -moz-animation: FadeInT 1s 3.5s ease both;}
.p1-5{-webkit-animation: FadeInB 1s 4s ease both; -moz-animation: FadeInB 1s 4s ease both;}

.p2-1{position: absolute;bottom:0%;}
.p2-2{position: absolute;top:17%;left:15px;}
.p2-3{position: absolute;top:17%;left:20px;}
.p2-4{position: absolute;top:17%;left:20px;}
.p2-5{position: absolute;top:17%;left:20px;}
.p2-6{position: absolute;top:17%;left:20px;}
.p2-7{position: absolute;top:17%;left:20px;}
.p2-8{position: absolute;top:17%;left:20px;}
.p2-9{position: absolute;top:17%;left:20px;}
.p2-10{position: absolute;top:17%;left:20px;}
.p2-11{position: absolute;top:17%;left:20px;}
.p2-12{position: absolute;bottom: 0%;}
.p2-13{position: absolute;top:48%;left:340px;}
.p2-14{position: absolute;top:48%;left:340px;}
.p2-15{position: absolute;top:48%;left:340px;}

.p2-1{-webkit-animation: FadeInB 0.5s 0.5s ease both; -moz-animation: FadeInT 1s 0.5s ease both;}
.p2-12{-webkit-animation: FadeIn 0.5s 1s ease both; -moz-animation: FadeIn 1s 1.5s ease both;}
.p2-2{-webkit-animation: FadeInT 0.5s 1.7s ease both; -moz-animation: FadeInT 1s 2.7s ease both;}
.p2-3{-webkit-animation: FadeInT 0.5s 1.9s ease both; -moz-animation: FadeInT 1s 2.9s ease both;}
.p2-4{-webkit-animation: FadeInT 0.5s 2.6s ease both; -moz-animation: FadeInT 1s 3.6s ease both;}
.p2-5{-webkit-animation: FadeInT 0.5s 2.8s ease both; -moz-animation: FadeInT 1s 3.8s ease both;}
.p2-6{-webkit-animation: FadeInT 0.5s 3.5s ease both; -moz-animation: FadeInT 1s 4.5s ease both;}
.p2-7{-webkit-animation: FadeInT 0.5s 3.7s ease both; -moz-animation: FadeInT 1s 4.7s ease both;}
.p2-8{-webkit-animation: FadeInT 0.5s 4.4s ease both; -moz-animation: FadeInT 1s 5.4s ease both;}
.p2-9{-webkit-animation: FadeInT 0.5s 4.6s ease both; -moz-animation: FadeInT 1s 5.6s ease both;}
.p2-10{-webkit-animation: FadeInT 0.5s 5.3s ease both; -moz-animation: FadeInT 1s 6.3s ease both;}
.p2-11{-webkit-animation: FadeInT 0.5s 5.5s ease both; -moz-animation: FadeInT 1s 6.5s ease both;}
.p2-13{-webkit-animation: FadeIn 1s 6s ease both; -moz-animation: FadeIn 1s 10s ease both;}
.p2-14{-webkit-animation: FadeIn 1s 6.6s ease both; -moz-animation: FadeIn 1s 11s ease both;}
.p2-15{-webkit-animation: FadeIn 1s 6.3s ease both; -moz-animation: FadeIn 1s 10.5s ease both;}

.p3-1{position: absolute;top:9%;left:20px;}
.p3-2{position: absolute;top:16%;left:250px;}
.p3-3{position: absolute;top:16%;left:240px;}
.p3-4{position: absolute;top:16%;left:240px;}
.p3-5{position: absolute;top:41%;left:240px;}
.p3-6{position: absolute;top:41%;left:240px;z-index: 100}
.p3-7{position: absolute;top:22%;left:0;}
.p3-8{position: absolute;top:22%;left:0;}
.p3-9{position: absolute;bottom:0%;}

.p3-1{-webkit-animation: FadeInL 1s 0.5s ease both; -moz-animation: FadeInL 1s 0.5s ease both;}
.p3-2{-webkit-animation: FadeInR 1s 1.5s ease both; -moz-animation: FadeInR 1s 1.5s ease both;}
.p3-3{-webkit-animation: swingAnimation 1s 2s ease both; -moz-animation: swingAnimation 1s 2s ease both;}
.p3-4{-webkit-animation: FadeInR 1s 2.5s ease both; -moz-animation: FadeInR 1s 2.5s ease both;}
.p3-5{-webkit-animation: MySmallToLarge 1s 3.5s ease both; -moz-animation: MySmallToLarge 1s 3.5s ease both;}
.p3-6{-webkit-animation: MySmallToLarge 1s 4.5s ease both; -moz-animation: MySmallToLarge 1s 4.5s ease both;}
.p3-7{-webkit-animation: FadeIn_loop 1s 2.5s infinite alternate ease both; -moz-animation: FadeIn_loop 1s 2.5s infinite alternate ease both;}
.p3-8{-webkit-animation: FadeIn 1s 2.5s ease both; -moz-animation: FadeIn 1s 2.5s ease both;}
.p3-9{-webkit-animation: FadeInL 1s 5.5s ease both; -moz-animation: FadeInL 1s 5.5s ease both;}

@-webkit-keyframes FadeIn_loop {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@-moz-keyframes FadeIn_loop {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
.p4-1{position: absolute;top:13%;left:12em;}
.p4-2{position: absolute;top:29%;left:30px;z-index: 10;}
.p4-3{position: absolute;top:29%;left:30px;}
.p4-4{position: absolute;top:29%;left:30px;z-index: 10;}
.p4-5{position: absolute;top:29%;left:30px;}
.p4-6{position: absolute;top:29%;left:30px;z-index: 10;}
.p4-7{position: absolute;top:29%;left:30px;}
.p4-8{position: absolute;top:29%;left:30px;z-index: 10;}
.p4-9{position: absolute;top:29%;left:30px;}
.p4-10{position: absolute;top:29%;left:30px;}
.p4-11{position: absolute;top:29%;left:30px;z-index: 10;}
.p4-12{position: absolute;bottom:10%;}
.p4-13{position: absolute;bottom:10%;left:0px;}
.p4-14{position: absolute;bottom:9%;left:30px;}
.p4-15{position: absolute;top:58%;left:300px;}
.p4-16{position: absolute;top:65%;left:400px;}
.p4-17{position: absolute;top:26%;left:400px;}

.p4-1{-webkit-animation: FadeInT 1s 0.5s ease both; -moz-animation: FadeInT 1s 1s ease both;}
.p4-12{-webkit-animation: FadeInB 1s 1.5s ease both; -moz-animation: FadeInB 1s 1.5s ease both;}
.p4-15{-webkit-animation: FadeInR 2s 1.8s infinite alternate ease both; -moz-animation: FadeInR 2s 1.8s infinite alternate ease both;}
.p4-16{-webkit-animation: FadeInR 2s 1.8s infinite alternate ease both; -moz-animation: FadeInR 2s 1.8s infinite alternate ease both;}
.p4-13{-webkit-animation: FadeInR_no 1s 2.5s ease both; -moz-animation: FadeInR_no 1s 2.5s ease both;}
.p4-14{-webkit-animation: FadeInL_no 1s 2.5s ease both; -moz-animation: FadeInL_no 1s 2.5s ease both;}
.p4-2{-webkit-animation: MySmallToLarge 1s 2.5s ease both; -moz-animation: MySmallToLarge 1s 2.5s ease both;}
.p4-3{-webkit-animation: MySmallToLarge 1s 2.5s ease both; -moz-animation: MySmallToLarge 1s 2.5s ease both;}
.p4-4{-webkit-animation: MySmallToLarge 1s 3s ease both; -moz-animation: MySmallToLarge 1s 3s ease both;}
.p4-5{-webkit-animation: MySmallToLarge 1s 3s ease both; -moz-animation: MySmallToLarge 1s 3s ease both;}
.p4-6{-webkit-animation: MySmallToLarge 1s 3.5s ease both; -moz-animation: MySmallToLarge 1s 3.5s ease both;}
.p4-7{-webkit-animation: MySmallToLarge 1s 3.5s ease both; -moz-animation: MySmallToLarge 1s 3.5s ease both;}
.p4-8{-webkit-animation: MySmallToLarge 1s 4.5s ease both; -moz-animation: MySmallToLarge 1s 4s ease both;}
.p4-9{-webkit-animation: MySmallToLarge 1s 4.5s ease both; -moz-animation: MySmallToLarge 1s 4s ease both;}
.p4-10{-webkit-animation: MySmallToLarge 1s 4s ease both; -moz-animation: MySmallToLarge 1s 4.5s ease both;}
.p4-11{-webkit-animation: MySmallToLarge 1s 4s ease both; -moz-animation: MySmallToLarge 1s 4.5s ease both;}
.p4-17{-webkit-animation: MySmallToLarge 1s 4s ease both; -moz-animation: MySmallToLarge 1s 4.5s ease both;}

@-webkit-keyframes FadeInR_no {
	0%{opacity:0;-webkit-transform:translateX(100px);}
	50%{opacity:1;-webkit-transform:translateX(50px);}
	100%{opacity:0;-webkit-transform:translateX(0);}
}
@-moz-keyframes FadeInR_no {
	0%{opacity:0;-webkit-transform:translateX(100px);}
	50%{opacity:1;-webkit-transform:translateX(50px);}
	100%{opacity:0;-webkit-transform:translateX(0);}
}
@-webkit-keyframes FadeInL_no {
	0%{opacity:0;-webkit-transform:translateX(0px);}
	50%{opacity:1;-webkit-transform:translateX(50px);}
	100%{opacity:0;-webkit-transform:translateX(100px);}
}
@-moz-keyframes FadeInL_no {
	0%{opacity:0;-webkit-transform:translateX(100px);}
	50%{opacity:1;-webkit-transform:translateX(50px);}
	100%{opacity:0;-webkit-transform:translateX(0);}
}
.p5-1{position: absolute;top:0%;right:0;}
.p5-2{position: absolute;top:0%;right:0;}
.p5-3{position: absolute;top:18%;left:10px;}
.p5-4{position: absolute;top:18%;left:10px;}
.p5-5{position: absolute;top:39%;left:10px;}
.p5-6{position: absolute;top:39%;left:10px;}
.p5-7{position: absolute;bottom:0%;left:0;}

.p5-7{-webkit-animation: FadeInB 1s 0.5s ease both; -moz-animation: FadeInB 1s 0.5s ease both;}
.p5-1{-webkit-animation: FadeInT 1s 1.5s ease both; -moz-animation: FadeInT 1s 1.5s ease both;}
.p5-2{-webkit-animation: FadeIn_loop 1s 1.6s infinite alternate ease both; -moz-animation: FadeIn_loop 1s 1.6s infinite alternate ease both;}
.p5-3{-webkit-animation: FadeIn 1s 1.8s ease both; -moz-animation: FadeIn 1s 1.8s ease both;}
.p5-4{-webkit-animation: BounceIn 1s 2s ease both; -moz-animation: MySmallToLarge 1s 2s ease both;}
.p5-5{-webkit-animation: FadeInL 1s 2.5s ease both; -moz-animation: FadeInL 1s 2.5s ease both;}
.p5-6{-webkit-animation: FadeInR 1s 2.7s ease both; -moz-animation: FadeInR 1s 2.7s ease both;}

.p6-1{position: absolute;top:16%;left:140px;}
.p6-2{position: absolute;top:16%;left:140px;}
.p6-3{position: absolute;top:27%;left:80px;}
.p6-4{position: absolute;top:55%;left:0;}
.p6-5{position: absolute;top:45%;left:0;}

.p6-1{-webkit-animation: FadeInB 1s 0.5s ease both; -moz-animation: FadeInB 1s 0.5s ease both;}
.p6-2{-webkit-animation: BounceIn 0.8s 0.8s ease both; -moz-animation: BounceIn 0.8s 1s ease both;}
.p6-3{-webkit-animation: BounceIn 0.8s 2s ease both; -moz-animation: BounceIn 0.8s 1.8s ease both;}
.p6-5{-webkit-animation: FadeInB 1.5s 1.3s ease both; -moz-animation: FadeInB 0.8s 2.4s ease both;}
.p6-4{-webkit-animation: FadeIn 0.8s 1s ease both; -moz-animation: FadeIn 0.8s 2.4s ease both;}

.p7{width:100%;height:100%;position: absolute;}
.p7-1{position: absolute;top:21%;left:100px;}
.p7-2{position: absolute;top:21%;left:100px;}
.p7-3{position: absolute;top:21%;left:100px;}
.p7-4{position: absolute;top:16%;left:300px;}
.p7-5{position: absolute;top:16%;left:300px;}
.p7-6{position: absolute;top:16%;left:300px;}
.p7-7{position: absolute;bottom:5%;left:100px;}
.p7-8{position: absolute;top:45%;left:240px;}
.p7-9{position: absolute;top:45%;left:240px;}
.p7-10{position: absolute;top:27%;left:30px;}
.p7-11{position: absolute;top:39%;right:10px;}
.p7-12{position: absolute;top:70%;left:20px;}

.p7-1{-webkit-animation: BounceInT 1s 0.5s ease both; -moz-animation: BounceInT 1s 1s ease both;}
.p7-2{-webkit-animation: bounceIn 0.5s 1.3s ease both; -moz-animation: bounceIn 1s 1.3s ease both;}
.p7-3{-webkit-animation: bounceIn 0.8s 1.8s ease both; -moz-animation: FadeIn 0.8s 1.8s ease both;}
.p7-4{-webkit-animation: FadeIn 0.8s 2.1s ease both; -moz-animation: FadeIn 0.8s 2.1s ease both;}
.p7-5{-webkit-animation: FadeIn 0.8s 2.6s ease both; -moz-animation: FadeIn 0.8s 2.6s ease both;}
.p7-6{-webkit-animation: FadeIn 0.8s 3.1s ease both; -moz-animation: FadeIn 0.8s 3.1s ease both;}
.p7-7{-webkit-animation: FadeIn 1.2s 3.6s ease both; -moz-animation: FadeIn 1.2s 3.6s ease both;}
.p7-8{-webkit-animation: diagonalAnimation 0.8s 4s ease both; -moz-animation: diagonalAnimation 0.8s 4s ease both;}
.p7-9{-webkit-animation: FadeIn_loop 0.8s 4.5s infinite alternate ease both; -moz-animation: FadeIn_loop 0.8s 4.5s infinite alternate ease both;}
.p7-10{-webkit-animation: BounceIn 0.8s 4.8s ease both; -moz-animation: BounceIn 0.8s 4.8s ease both;}
.p7-11{-webkit-animation: BounceIn 0.8s 5s ease both; -moz-animation: BounceIn 0.8s 5s ease both;}
.p7-12{-webkit-animation: BounceIn 0.8s 5.2s ease both; -moz-animation: BounceIn 0.8s 5.2s ease both;}

.p6-panel{position: relative; width:90%; left:5%;}
.reg-panel{	width: 100%;padding: 6px;line-height: 22px; margin-bottom: 10px;}
.reg-title{float:left;width:160px;text-align:right;font-size:30px;color: #32ade1; font-weight: bold; padding: 10px;}
.reg-text input,textarea{width:80%; border: 1px solid #32ade1;border-radius: 5px;padding:3px;background-color:transparent;color: #32ade1;font-family: 'microsoft yahei','\534E\6587\7EC6\9ED1',Verdana,Arial,Helvetica,sans-serif;font-size:30px}
.reg-text select{width:80%; border: 1px solid #32ade1;border-radius: 5px;padding:3px;background-color:#fff;color: #32ade1;font-family: 'microsoft yahei','\534E\6587\7EC6\9ED1',Verdana,Arial,Helvetica,sans-serif;font-size:30px}
.reg-text{text-align: left; margin-left:160px;}
.ret-span {width:90%; border: none;padding:3px;line-height: 40px; color: #32ade1;font-family: 'microsoft yahei','\534E\6587\7EC6\9ED1',Verdana,Arial,Helvetica,sans-serif;font-size:30px}

/*my animation*/
@-webkit-keyframes divShake1
{
	0%{-webkit-transform:rotate(0deg);}
	19%{-webkit-transform:rotate(0deg);}
	20%{-webkit-transform:rotate(2deg);translate3d(4px,5px,0)}
	21%{-webkit-transform:rotate(-2deg);translate3d(-4px,-5px,0)}
	22%{-webkit-transform:rotate(4deg);translate3d(4px,5px,0)}
	23%{-webkit-transform:rotate(-4deg);translate3d(-4px,-5px,0)}
	24%{-webkit-transform:rotate(0deg);translate3d(0px,0px,0)}
	100%{-webkit-transform:rotate(0deg);translate3d(0px,0px,0)}
}
@-moz-keyframes divShake1
{
	0%{-moz-transform:rotate(0deg);}
	20%{-moz-transform:rotate(1deg);translate3d(2px,3px,0)}
	40%{-moz-transform:rotate(-1deg);translate3d(-2px,-3px,0)}
	60%{-moz-transform:rotate(2deg);translate3d(2px,3px,0)}
	80%{-moz-transform:rotate(-2deg);translate3d(-2px,-3px,0)}
	100%{-moz-transform:rotate(0deg);translate3d(0px,0px,0)}
}

@-webkit-keyframes MyShakeUp
{
	0%{-webkit-transform:translateY(-18px);}
	100%{-webkit-transform:translateX(0px);}
}

@-moz-keyframes MyShakeUp
{
	0%{-moz-transform:translateX(-18px);}
	100%{-moz-transform:translateX(0px);}
}


@-webkit-keyframes TitelRotate
{
	0%{opacity:0; transform-origin:0% 0%; -webkit-transform:rotate(-40deg) translateX(200px); }
	100%{opacity:1; transform-origin:0% 0%; -webkit-transform:rotate(0deg) translateX(0px);}
}

@-webkit-keyframes FlyIn
{
	0%{opacity:0;-webkit-transform:scale(0.8) translate3d(-100px,100px,0px);}
	100%{opacity:1;-webkit-transform:scale(1) translate3d(0,0,0);}
}
@-moz-keyframes FlyIn
{
	0%{opacity:0;-moz-transform:scale(0.8) translate3d(-100px,100px,0px);}
	100%{opacity:1;-moz-transform:scale(1) translate3d(0,0,0);}
}

@-webkit-keyframes FlyIn1
{
	0%{opacity:0;-webkit-transform:scale(0.8) translate3d(-50px,100px,0px);}
	100%{opacity:1;-webkit-transform:scale(1) translate3d(0,0,0);}
}
@-moz-keyframes FlyIn1
{
	0%{opacity:0;-moz-transform:scale(0.8) translate3d(-50px,100px,0px);}
	100%{opacity:1;-moz-transform:scale(1) translate3d(0,0,0);}
}


/*my animation*/
@-webkit-keyframes zoomInDown
{
	0%{opacity:0;-webkit-transform:scale3d(0.8,0.8,0.8) translate3d(-100px,-600px,-400px) rotate(360deg);}
	1%{opacity:1;-webkit-transform:scale3d(0.8,0.8,0.8) translate3d(-100px,-600px,-400px) rotate(360deg);}
	100%{opacity:1;-webkit-transform:scale3d(1,1,1) translate3d(0,0,0) rotate(0deg);}
}
@-moz-keyframes zoomInDown
{
	0%{opacity:0;-moz-transform:scale3d(0.8,0.8,0.8) translate3d(-100px,-600px,-400px) rotate(360deg);}
	1%{opacity:1;-moz-transform:scale3d(0.8,0.8,0.8) translate3d(-100px,-600px,-400px) rotate(360deg);}
	100%{opacity:1;-moz-transform:scale3d(1,1,1) translate3d(0,0px,0);}
}

@-webkit-keyframes zoomInDown2{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}
@keyframes zoomInDown2{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}


/* ROTATE FLIP */
@-webkit-keyframes PepleIn {
	0%{opacity: 0; -webkit-transform:scale3d(0.8,0.8,0.8) translate3d(200px, 100px, 0);}
	100%{opacity: 1; -webkit-transform:scale3d(1,1,1) translate3d(0px, 0px, 0);}
}



@-webkit-keyframes Page1Flash {
    0% { opacity: 0;}
    20% { opacity: 1;}
	40% { opacity: 0;}
	100% { opacity: 0;}
}
@-moz-keyframes Page1Flash {
    0% { opacity: 0;}
    20% { opacity: 1;}
	40% { opacity: 0;}
	100% { opacity: 0;}
}

@-webkit-keyframes Page1MoveDow {
    0% { opacity: 0; -webkit-transform:translateY(-100px); }
    1% { opacity: 1; -webkit-transform:translateY(-100px); }
	100% { opacity: 0; -webkit-transform:translateY(450px) translateX(300px); }
}
@-moz-keyframes Page1MoveDow {
    0% { opacity: 0; -moz-transform:translateY(-100px); }
    1% { opacity: 1; -moz-transform:translateY(-100px); }
	100% { opacity: 0; -moz-transform:translateY(450px) translateX(300px); }
}



@-webkit-keyframes Myoverflow {
    0% { opacity: 1; width: 0px; }
	100% { opacity: 1; width: 100%; }
}
@-moz-keyframes Myoverflow {
    0% { opacity: 1; width: 0px; }
	100% { opacity: 1; width: 100%; }
}

@-webkit-keyframes MyFanpai
{
0%{-webkit-transform:rotateY(-90deg);}
100%{-webkit-transform:rotateY(0deg);}
}
@-moz-keyframes MyFanpai
{
0%{-moz-transform:rotateY(-90deg);}
100%{-moz-transform:rotateY(0deg);}
}

@-webkit-keyframes MyFanpaiX
{
0%{-webkit-transform:rotateX(-90deg);}
100%{-webkit-transform:rotateX(0deg);}
}
@-moz-keyframes MyFanpaiX
{
0%{-moz-transform:rotateX(-90deg);}
100%{-moz-transform:rotateX(0deg);}
}

/* JOURNAL */
@-webkit-keyframes MyMoveDown2 {
	0%{-webkit-transform:translateY(-257px);}
	100%{-webkit-transform:translateY(0px);}
}

@-webkit-keyframes MyFadeInR2{
	0%{opacity:0;-webkit-transform:translateX(50px);}
	20%{opacity:1;-webkit-transform:translateX(0);}
	30%{opacity:0;-webkit-transform:translateX(0);}
	100%{opacity:0;-webkit-transform:translateX(0);}
}

@-webkit-keyframes MyFadeInT{
	0%{opacity:0;-webkit-transform:translateY(-200px);}
	100%{opacity:1;-webkit-transform:translateY(0);}
}
@-moz-keyframes MyFadeInT{
	0%{opacity:0;-moz-transform:translateY(-200px);}
	100%{opacity:1;-moz-transform:translateY(0);}
}

@-webkit-keyframes MyFadeInR{
	0%{opacity:0;-webkit-transform:translateX(200px);}
	100%{opacity:1;-webkit-transform:translateX(0);}
}
@-moz-keyframes MyFadeInR{
	0%{opacity:0;-webkit-transform:translateX(200px);}
	100%{opacity:1;-webkit-transform:translateX(0);}
}

@-webkit-keyframes MyFadeInB{
	0%{opacity:0;-webkit-transform:translateY(280px);}
	100%{opacity:1;-webkit-transform:translateX(0);}
}
@-moz-keyframes MyFadeInB{
	0%{opacity:0;-webkit-transform:translateX(0px);}
	100%{opacity:1;-webkit-transform:translateX(0);}
}

@-webkit-keyframes MyFadeInL{
	0%{opacity:0;-webkit-transform:translateX(-480px);}
	100%{opacity:1;-webkit-transform:translateX(0);}
}
@-moz-keyframes MyFadeInL{
	0%{opacity:0;-webkit-transform:translateX(-480px);}
	100%{opacity:1;-webkit-transform:translateX(0);}
}



/* ROTATE DOWN */
@-webkit-keyframes fourRock {
	0% {opacity:0;-webkit-transform-origin: 0 0;}
	5%{opacity:1;-webkit-transform: scale(0.5);}
	10% {-webkit-transform: scale(0.5)}
	15% {-webkit-transform: scale(0.5) translateX(130px);}
	20% {-webkit-transform: scale(0.5) translateX(130px);}
	25% {-webkit-transform: scale(0.5) translate(130px,130px);}
	30% {-webkit-transform: scale(0.5) translate(0px,130px);}
	35% {-webkit-transform: scale(0.5) translate(0px,0px);}
	40% {-webkit-transform: scale(1);}
	100%{-webkit-transform: scale(1);-webkit-transform-origin: 0 0;}
	
}
@-moz-keyframes fourRock {
	0% {-moz-transform-origin: 0 0;}
	5%{-moz-transform: scale(0.5);}
	10% {-moz-transform: scale(0.5)}
	15% {-moz-transform: scale(0.5) translateX(130px);}
	20% {-moz-transform: scale(0.5) translateX(130px);}
	25% {-moz-transform: scale(0.5) translate(130px,130px);}
	30% {-moz-transform: scale(0.5) translate(0px,130px);}
	35% {-moz-transform: scale(0.5) translate(0px,0px);}
	40% {-moz-transform: scale(1);}
	100%{-moz-transform: scale(1);-webkit-transform-origin: 0 0;}
	
}

/*左右摇晃*/
@-webkit-keyframes MyShake
{
0%{-webkit-transform:translateX(-100);}
100%{-webkit-transform:translateX(100px);}
}

@-moz-keyframes MyShake
{
0%{-moz-transform:translateX(-100);}
100%{-moz-transform:translateX(100px);}
}


/* ROTATE FLIP */
@-webkit-keyframes rotateFlip {
	0%{opacity:0;}
	39%{opacity:1;-webkit-transform-origin:0%;-webkit-transform: rotateY(0deg);}
	40%{-webkit-transform-origin: 50%; -webkit-transform: rotateY(0deg); opacity:1}
	65%{-webkit-transform: rotateY(70deg); opacity: 0;}
	75%{-webkit-transform: rotateY(70deg); opacity: 0;}
	100%{-webkit-transform: rotateY(0deg); opacity: 1;}
}
@-moz-keyframes rotateFlip {
	0%{opacity:0;}
	50%{-webkit-transform-origin: 50%; opacity:1}
	70%{-webkit-transform: rotateY(70deg); opacity: 0;}
	80%{-webkit-transform: rotateY(70deg); opacity: 0;}
	100%{-webkit-transform: rotateY(0deg); opacity: 1;}
}

/* JOURNAL */
@-webkit-keyframes MyMoveDown {
	0%{opacity:0; -webkit-transform:translateY(0px);}
	1%{opacity:1;-webkit-transform:translateY(0px);}
	99%{opacity:1;-webkit-transform:translateY(160px);}
	100%{opacity:0;-webkit-transform:translateY(160px);}
}
@-moz-keyframes MyMoveDown {
	0%{opacity:0; -moz-transform:translateY(0px);}
	1%{opacity:1;-moz-transform:translateY(0px);}
	99%{opacity:1;-moz-transform:translateY(160px);}
	100%{opacity:0; -moz-transform:translateY(160px);}
}

/* JOURNAL */
@-webkit-keyframes MyMoveUp {
	0%{opacity:0;-webkit-transform:translateY(200px) translateX(50px);}
	100%{opacity:1;-webkit-transform:translateY(0px) translateX(0px);}
}
@-moz-keyframes MyMoveUp {
	0%{opacity:0;-webkit-transform:translateY(200px) translateX(50px);}
	100%{opacity:1;-webkit-transform:translateY(0px) translateX(0px);}
}

/* TREE FLIP RIGHT */
@-webkit-keyframes treeFlipRight {
	0% {-webkit-transform: rotateY(-90deg);}
	100%{-webkit-transform: rotateY(0deg);}
}
@-moz-keyframes treeFlipRight {
	0% {-moz-transform: rotateY(-90deg);}
	100%{-moz-transform: rotateY(0deg);}
}

/* DANCE */
@-webkit-keyframes dance {
	0%{opacity: 0;}
	1%{opacity: 1;}
	2%,10%,20%{-webkit-transform:rotateZ(10deg);}
	5%,15%,25%{-webkit-transform:rotateZ(-10deg);}
	35%,60%,100%{-webkit-transform:scale(1) rotateZ(0deg);}
	40% {-webkit-transform:scale(1.3);}
}
@-moz-keyframes dance {
	0%,10%,20%{-moz-transform:rotateZ(10deg);}
	5%,15%,25%{-moz-transform:rotateZ(-10deg);}
	35%,60%,100%{-moz-transform:scale(1) rotateZ(0deg);}
	40% {-moz-transform:scale(1.3);}
}

/* JOURNAL */
@-webkit-keyframes journal {
	0%{-webkit-transform: scale(0) rotate(-360deg);}
	100% {-webkit-transform: scale(1) rotate(0deg);}
}
@-moz-keyframes journal {
	0%{-moz-transform: scale(0) rotate(-360deg);}
	100% {-moz-transform: scale(1) rotate(0deg);}
}
/*-----------------------*/

@-webkit-keyframes fadeInUp
{
0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInUp
{
0%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}
}

@-webkit-keyframes fadeInDown
{
0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInDown
{
0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}
}


@-webkit-keyframes shakebody2{
    0% ,100% {-webkit-transform:translate3d(0,0,0);}
    10%{-webkit-transform:translate3d(10px,-10px,0);}
    20%{-webkit-transform:translate3d(5px,-5px,0);}
    30%{-webkit-transform:translate3d(15px,-15px,0);}
    45%{-webkit-transform:translate3d(0px,0px,0);}
}
@keyframes shakebody2{
    0% ,100%{transform:translate3d(0,0,0);}
    25%{transform:translate3d(5px,-5px,0);}
    50%{transform:translate3d(-5px,5px,0);}
    75%{transform:translate3d(0px,-0px,0);}
}


@-webkit-keyframes shakebody{
    0% ,100% {-webkit-transform:translate3d(0,0,0);}
    25%{-webkit-transform:translate3d(10px,-10px,0);}
    50%{-webkit-transform:translate3d(-10px,10px,0);}
    75%{-webkit-transform:translate3d(5px,-5px,0);}
}
@keyframes shakebody{
    0% ,100%{transform:translate3d(0,0,0);}
    25%{transform:translate3d(10px,-10px,0);}
    50%{transform:translate3d(-10px,10px,0);}
    75%{transform:translate3d(5px,-5px,0);}
}

@-webkit-keyframes texta {
0%{opacity:1;-webkit-transform:translateY(0px)}
10%{opacity:1;-webkit-transform:translateY(5px)}
16%{opacity:1;-webkit-transform:translateY(-5px)}
22%{opacity:1;-webkit-transform:translateY(10px)}
28%{opacity:1;-webkit-transform:translateY(-10px)}
34%{opacity:1;-webkit-transform:translateY(0)}
100%{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes texta {
0%{opacity:1;-moz-transform:translateY(0px)}
10%{opacity:1;-moz-transform:translateY(5px)}
16%{opacity:1;-moz-transform:translateY(-5px)}
22%{opacity:1;-moz-transform:translateY(10px)}
28%{opacity:1;-moz-transform:translateY(-10px)}
34%{opacity:1;-moz-transform:translateY(0)}
100%{opacity:1;-moz-transform:translateY(0)}
}

/*放大*/
@-webkit-keyframes MySmallToLarge
{
	0%{opacity:0;-webkit-transform:scale(0.1) translateY(0px);}
	100%{opacity:1;-webkit-transform:scale(1) translateY(0px);}
}
@-moz-keyframes MySmallToLarge
{
	0%{opacity:0;-moz-transform:scale(0.1) translateY(0px);}
	100%{opacity:1;-moz-transform:scale(1) translateY(0px);}
}

@-webkit-keyframes MyLargeToSmall
{
	0%{opacity:0;-webkit-transform:scale(4) translateY(-20px);}
	100%{opacity:1;-webkit-transform:scale(1) translateY(0px);}
}
@-moz-keyframes MyLargeToSmall
{
	0%{opacity:0;-moz-transform:scale(4) translateY(-20px);}
	100%{opacity:1;-moz-transform:scale(1) translateY(0px);}
}

/*弹入*/
@-webkit-keyframes MyBounceIn
{
	0%{opacity:1;-webkit-transform:scale(1);}
	10%{opacity:1;-webkit-transform:scale(1.02);}
	16%{opacity:1;-webkit-transform:scale(0.98);}
	22%{opacity:1;-webkit-transform:scale(1.05);}
	28%{opacity:1;-webkit-transform:scale(0.95);}
	100%{opacity:1;-webkit-transform:scale(1);}
}
@-moz-keyframes MyBounceIn
{
	0%{opacity:1;-moz-transform:scale(1);}
	10%{opacity:1;-moz-transform:scale(1.02);}
	16%{opacity:1;-moz-transform:scale(0.98);}
	22%{opacity:1;-moz-transform:scale(1.05);}
	28%{opacity:1;-moz-transform:scale(0.95);}
	100%{opacity:1;-moz-transform:scale(1);}
}


/*弧线 渐收 弧线 循环移动*/
.star1 {position: absolute;top: 0%;right: 0%;width: 27%;}
.star1{
animation:startAnimation 1.8s infinite ;
-moz-animation:start2Animation 2s infinite ;
-webkit-animation:start2Animation 2s infinite ;
}

.star2 {position: absolute;top: 10%;right: 0%;width: 25%;}
.star2{
animation:start2Animation 3s infinite ;
-moz-animation:start2Animation 3s infinite ;
-webkit-animation:start2Animation 1.2s infinite ;
}

.star3 {position: absolute;top: 20%;right: 0%;width: 30%;}
.star3{
animation:start2Animation 2.4s infinite ;
-moz-animation:start2Animation 4s infinite ;
-webkit-animation:start2Animation 1.4s infinite ;
}

.star4 {position: absolute;top: 30%;right: 0%;width: 20%;}
.star4{
animation:start2Animation 3s infinite ;
-moz-animation:start2Animation 3s infinite ;
-webkit-animation:start2Animation 1.6s infinite ;
}
.star5 {position: absolute;top: 40%;right: 0%;width: 40%;}
.star5{
animation:start2Animation 2.2s infinite ;
-moz-animation:start2Animation 2.2s infinite ;
-webkit-animation:start2Animation 1.8s infinite ;
}


@-webkit-keyframes startAnimation{
0%{opacity:0.3;}
100%{opacity:0.1;right:100%;top:40%}
}
@-moz-keyframes startAnimation{
0%{opacity:0.3;}
100%{opacity:0.1;right:100%;top:40%}
}


@-webkit-keyframes start2Animation{
0%{opacity:0.6;}
100%{opacity:0.1;right:100%;top:90%}
}
@-moz-keyframes start2Animation{
0%{opacity:0.6;}
100%{opacity:0.1;right:100%;top:90%}
}



/*弹跳*/
@-webkit-keyframes Bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);}40%{-webkit-transform:translateY(-30px);}60%{-webkit-transform:translateY(-15px);}}
@-moz-keyframes Bounce{0%,20%,50%,80%,100%{-moz-transform:translateY(0);}40%{-moz-transform:translateY(-30px);}60%{-moz-transform:translateY(-15px);}}
@-ms-keyframes Bounce{0%,20%,50%,80%,100%{-ms-transform:translateY(0);}40%{-ms-transform:translateY(-30px);}60%{-ms-transform:translateY(-15px);}}
@keyframes Bounce{0%,20%,50%,80%,100%{transform:translateY(0);}40%{transform:translateY(-30px);}60%{transform:translateY(-15px);}}

/*弹入*/
@-webkit-keyframes BounceIn{0%{opacity:0;-webkit-transform:scale(0.3);}50%{opacity:1;-webkit-transform:scale(1.05);}70%{-webkit-transform:scale(0.9);}100%{-webkit-transform:scale(1);}}
@-moz-keyframes BounceIn{0%{opacity:0;-moz-transform:scale(0.3);}50%{opacity:1;-moz-transform:scale(1.05);}70%{-moz-transform:scale(0.9);}100%{-moz-transform:scale(1);}}
@-ms-keyframes BounceIn{0%{opacity:0;-ms-transform:scale(0.3);}50%{opacity:1;-ms-transform:scale(1.05);}70%{-ms-transform:scale(0.9);}100%{-ms-transform:scale(1);}}
@keyframes BounceIn{0%{opacity:0;transform:scale(0.3);}50%{opacity:1;transform:scale(1.05);}70%{transform:scale(0.9);}100%{transform:scale(1);}}

/*上弹入*/
@-webkit-keyframes BounceInT{0%{opacity:0;-webkit-transform:translateY(-100px);}50%{opacity:1;-webkit-transform:translateY(30px);}70%{-webkit-transform:translateY(-10px);}100%{-webkit-transform:translateY(0px);}}
@-moz-keyframes BounceInT{0%{opacity:0;-moz-transform:translateY(-100px);}60%{opacity:1;-moz-transform:translateY(30px);}80%{-moz-transform:translateY(-10px);}100%{-moz-transform:translateY(0);}}
@-ms-keyframes BounceInT{0%{opacity:0;-ms-transform:translateY(-100px);}60%{opacity:1;-ms-transform:translateY(30px);}80%{-ms-transform:translateY(-10px);}100%{-ms-transform:translateY(0);}}
@keyframes BounceInT{0%{opacity:0;transform:translateY(-100px);}60%{opacity:1;transform:translateY(30px);}80%{transform:translateY(-10px);}100%{transform:translateY(0);}}

/*右弹入*/
@-webkit-keyframes BounceInR{0%{opacity:0;-webkit-transform:translateX(100px);}60%{opacity:1;-webkit-transform:translateX(-30px);}80%{-webkit-transform:translateX(10px);}100%{-webkit-transform:translateX(0);}}
@-moz-keyframes BounceInR{0%{opacity:0;-moz-transform:translateX(100px);}60%{opacity:1;-moz-transform:translateX(-30px);}80%{-moz-transform:translateX(10px);}100%{-moz-transform:translateX(0);}}
@-ms-keyframes BounceInR{0%{opacity:0;-ms-transform:translateX(100px);}60%{opacity:1;-ms-transform:translateX(-30px);}80%{-ms-transform:translateX(10px);}100%{-ms-transform:translateX(0);}}
@keyframes BounceInR{0%{opacity:0;transform:translateX(100px);}60%{opacity:1;transform:translateX(-30px);}80%{transform:translateX(10px);}100%{transform:translateX(0);}}

/*左弹入*/
@-webkit-keyframes BounceInL{0%{opacity:0;-webkit-transform:translateX(-100px);}60%{opacity:1;-webkit-transform:translateX(30px);}80%{-webkit-transform:translateX(-10px);}100%{-webkit-transform:translateX(0);}}
@-moz-keyframes BounceInL{0%{opacity:0;-moz-transform:translateX(-100px);}60%{opacity:1;-moz-transform:translateX(30px);}80%{-moz-transform:translateX(-10px);}100%{-moz-transform:translateX(0);}}
@-ms-keyframes BounceInL{0%{opacity:0;-ms-transform:translateX(-100px);}60%{opacity:1;-ms-transform:translateX(30px);}80%{-ms-transform:translateX(-10px);}100%{-ms-transform:translateX(0);}}
@keyframes BounceInL{0%{opacity:0;transform:translateX(-100px);}60%{opacity:1;transform:translateX(30px);}80%{transform:translateX(-10px);}100%{transform:translateX(0);}}

/*下弹入*/
@-webkit-keyframes BounceInB{0%{opacity:0;-webkit-transform:translateY(100px);}60%{opacity:1;-webkit-transform:translateY(-30px);}80%{-webkit-transform:translateY(10px);}100%{-webkit-transform:translateY(0);}}
@-moz-keyframes BounceInB{0%{opacity:0;-moz-transform:translateY(100px);}60%{opacity:1;-moz-transform:translateY(-30px);}80%{-moz-transform:translateY(10px);}100%{-moz-transform:translateY(0);}}
@-ms-keyframes BounceInB{0%{opacity:0;-ms-transform:translateY(100px);}60%{opacity:1;-ms-transform:translateY(-30px);}80%{-ms-transform:translateY(10px);}100%{-ms-transform:translateY(0);}}
@keyframes BounceInB{0%{opacity:0;transform:translateY(100px);}60%{opacity:1;transform:translateY(-30px);}80%{transform:translateY(10px);}100%{transform:translateY(0);}}

/*弹出*/
@-webkit-keyframes BounceOut{0%{-webkit-transform:scale(1);}50%{-webkit-transform:scale(0.9);}70%{opacity:1;-webkit-transform:scale(1.05);}100%{opacity:0;-webkit-transform:scale(0.3);}}
@-moz-keyframes BounceOut{0%{-moz-transform:scale(1);}50%{-moz-transform:scale(0.9);}70%{opacity:1;-moz-transform:scale(1.05);}100%{opacity:0;-moz-transform:scale(0.3);}}
@-ms-keyframes BounceOut{0%{-ms-transform:scale(1);}50%{-ms-transform:scale(0.9);}70%{opacity:1;-ms-transform:scale(1.05);}100%{opacity:0;-ms-transform:scale(0.3);}}
@keyframes BounceOut{0%{transform:scale(1);}50%{transform:scale(0.9);}70%{opacity:1;transform:scale(1.05);}100%{opacity:0;transform:scale(0.3);}}

/*上弹出*/
@-webkit-keyframes BounceOutT{0%{-webkit-transform:translateY(0);}20%{opacity:1;-webkit-transform:translateY(20px);}100%{opacity:0;-webkit-transform:translateY(-100px);}}
@-moz-keyframes BounceOutT{0%{-moz-transform:translateY(0);}20%{opacity:1;-moz-transform:translateY(20px);}100%{opacity:0;-moz-transform:translateY(-100px);}}
@-ms-keyframes BounceOutT{0%{-ms-transform:translateY(0);}20%{opacity:1;-ms-transform:translateY(20px);}100%{opacity:0;-ms-transform:translateY(-100px);}}
@keyframes BounceOutT{0%{transform:translateY(0);}20%{opacity:1;transform:translateY(20px);}100%{opacity:0;transform:translateY(-100px);}}

/*右弹出*/
@-webkit-keyframes BounceOutR{0%{-webkit-transform:translateX(0);}20%{opacity:1;-webkit-transform:translateX(-20px);}100%{opacity:0;-webkit-transform:translateX(100px);}}
@-moz-keyframes BounceOutR{0%{-moz-transform:translateX(0);}20%{opacity:1;-moz-transform:translateX(-20px);}100%{opacity:0;-moz-transform:translateX(100px);}}
@-ms-keyframes BounceOutR{0%{-ms-transform:translateX(0);}20%{opacity:1;-ms-transform:translateX(-20px);}100%{opacity:0;-ms-transform:translateX(100px);}}
@keyframes BounceOutR{0%{transform:translateX(0);}20%{opacity:1;transform:translateX(-20px);}100%{opacity:0;transform:translateX(100px);}}

/*左弹出*/
@-webkit-keyframes BounceOutL{0%{-webkit-transform:translateX(0);}20%{opacity:1;-webkit-transform:translateX(20px);}100%{opacity:0;-webkit-transform:translateX(-100px);}}
@-moz-keyframes BounceOutL{0%{-moz-transform:translateX(0);}20%{opacity:1;-moz-transform:translateX(20px);}100%{opacity:0;-moz-transform:translateX(-100px);}}
@-ms-keyframes BounceOutL{0%{-ms-transform:translateX(0);}20%{opacity:1;-ms-transform:translateX(20px);}100%{opacity:0;-ms-transform:translateX(-100px);}}
@keyframes BounceOutL{0%{transform:translateX(0);}20%{opacity:1;transform:translateX(20px);}100%{opacity:0;transform:translateX(-200px);}}

/*下弹出*/
@-webkit-keyframes BounceOutB{0%{-webkit-transform:translateY(0);}20%{opacity:1;-webkit-transform:translateY(-20px);}100%{opacity:0;-webkit-transform:translateY(100px);}}
@-moz-keyframes BounceOutB{0%{-moz-transform:translateY(0);}20%{opacity:1;-moz-transform:translateY(-20px);}100%{opacity:0;-moz-transform:translateY(100px);}}
@-ms-keyframes BounceOutB{0%{-ms-transform:translateY(0);}20%{opacity:1;-ms-transform:translateY(-20px);}100%{opacity:0;-ms-transform:translateY(100px);}}
@keyframes BounceOutB{0%{transform:translateY(0);}20%{opacity:1;transform:translateY(-20px);}100%{opacity:0;transform:translateY(100px);}}

/*淡入*/
@-webkit-keyframes FadeIn{0%{opacity:0;}100%{opacity:1;}}
@-moz-keyframes FadeIn{0%{opacity:0;}100%{opacity:1;}}
@-ms-keyframes FadeIn{0%{opacity:0;}100%{opacity:1;}}
@keyframes FadeIn{0%{opacity:0;}100%{opacity:1;}}

/*上淡入*/
@-webkit-keyframes FadeInT{0%{opacity:0;-webkit-transform:translateY(-100px);}100%{opacity:1;-webkit-transform:translateY(0);}}
@-moz-keyframes FadeInT{0%{opacity:0;-moz-transform:translateY(-100px);}100%{opacity:1;-moz-transform:translateY(0);}}
@-ms-keyframes FadeInT{0%{opacity:0;-ms-transform:translateY(-100px);}100%{opacity:1;-ms-transform:translateY(0);}}
@keyframes FadeInT{0%{opacity:0;transform:translateY(-100px);}100%{opacity:1;transform:translateY(0);}}

/*左淡入*/
@-webkit-keyframes FadeInL{0%{opacity:0;-webkit-transform:translateX(-100px);}100%{opacity:1;-webkit-transform:translateX(0);}}
@-moz-keyframes FadeInL{0%{opacity:0;-moz-transform:translateX(-100px);}100%{opacity:1;-moz-transform:translateX(0);}}
@-ms-keyframes FadeInL{0%{opacity:0;-ms-transform:translateX(-100px);}100%{opacity:1;-ms-transform:translateX(0);}}
@keyframes FadeInL{0%{opacity:0;transform:translateX(-100px);}100%{opacity:1;transform:translateX(0);}}

/*右淡入*/
@-webkit-keyframes FadeInR{0%{opacity:0;-webkit-transform:translateX(100px);}100%{opacity:1;-webkit-transform:translateX(0);}}
@-moz-keyframes FadeInR{0%{opacity:0;-moz-transform:translateX(100px);}100%{opacity:1;-moz-transform:translateX(0);}}
@-ms-keyframes FadeInR{0%{opacity:0;-ms-transform:translateX(100px);}100%{opacity:1;-ms-transform:translateX(0);}}
@keyframes FadeInR{0%{opacity:0;transform:translateX(100px);}100%{opacity:1;transform:translateX(0);}}

/*下淡入*/
@-webkit-keyframes FadeInB{0%{opacity:0;-webkit-transform:translateY(100px);}100%{opacity:1;-webkit-transform:translateY(0);}}
@-moz-keyframes FadeInB{0%{opacity:0;-moz-transform:translateY(100px);}100%{opacity:1;-moz-transform:translateY(0);}}
@-ms-keyframes FadeInB{0%{opacity:0;-ms-transform:translateY(100px);}100%{opacity:1;-ms-transform:translateY(0);}}
@keyframes FadeInB{0%{opacity:0;transform:translateY(100px);}100%{opacity:1;transform:translateY(0);}}

/*淡出*/
@-webkit-keyframes FadeOut{0%{opacity:1;}100%{opacity:0;}}
@-moz-keyframes FadeOut{0%{opacity:1;}100%{opacity:0;}}
@-ms-keyframes FadeOut{0%{opacity:1;}100%{opacity:0;}}
@keyframes FadeOut{0%{opacity:1;}100%{opacity:0;}}

/*上淡出*/
@-webkit-keyframes FadeOutT{0%{opacity:1;-webkit-transform:translateY(0);}100%{opacity:0;-webkit-transform:translateY(-100px);}}
@-moz-keyframes FadeOutT{0%{opacity:1;-moz-transform:translateY(0);}100%{opacity:0;-moz-transform:translateY(-100px);}}
@-ms-keyframes FadeOutT{0%{opacity:1;-ms-transform:translateY(0);}100%{opacity:0;-ms-transform:translateY(-100px);}}
@keyframes FadeOutT{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-100px);}}

/*左淡出*/
@-webkit-keyframes FadeOutL{0%{opacity:1;-webkit-transform:translateX(0);}100%{opacity:0;-webkit-transform:translateX(-100px);}}
@-moz-keyframes FadeOutL{0%{opacity:1;-moz-transform:translateX(0);}100%{opacity:0;-moz-transform:translateX(-100px);}}
@-ms-keyframes FadeOutL{0%{opacity:1;-ms-transform:translateX(0);}100%{opacity:0;-ms-transform:translateX(-100px);}}
@keyframes FadeOutL{0%{opacity:1;transform:translateX(0);}100%{opacity:0;transform:translateX(-100px);}}

/*右淡出*/
@-webkit-keyframes FadeOutR{0%{opacity:1;-webkit-transform:translateX(0);}100%{opacity:0;-webkit-transform:translateX(100px);}}
@-moz-keyframes FadeOutR{0%{opacity:1;-moz-transform:translateX(0);}100%{opacity:0;-moz-transform:translateX(100px);}}
@-ms-keyframes FadeOutR{0%{opacity:1;-ms-transform:translateX(0);}100%{opacity:0;-ms-transform:translateX(100px);}}
@keyframes FadeOutR{0%{opacity:1;transform:translateX(0);}100%{opacity:0;transform:translateX(100px);}}

/*下淡出*/
@-webkit-keyframes FadeOutB{0%{opacity:1;-webkit-transform:translateY(0);}100%{opacity:0;-webkit-transform:translateY(100px);}}
@-moz-keyframes FadeOutB{0%{opacity:1;-moz-transform:translateY(0);}100%{opacity:0;-moz-transform:translateY(100px);}}
@-ms-keyframes FadeOutB{0%{opacity:1;-ms-transform:translateY(0);}100%{opacity:0;-ms-transform:translateY(100px);}}
@keyframes FadeOutB{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(100px);}}

/*翻转*/
@-webkit-keyframes Flip{0%{-webkit-transform:perspective(400px) rotateY(0deg);-webkit-animation-timing-function:ease-out;}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function:ease-out;}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;}80%{-webkit-transform:perspective(400px) rotateY(360deg) scale(0.95);-webkit-animation-timing-function:ease-in;}100%{-webkit-transform:perspective(400px) scale(1);-webkit-animation-timing-function:ease-in;}}
@-moz-keyframes Flip{0%{-moz-transform:perspective(400px) rotateY(0deg);-moz-animation-timing-function:ease-out;}40%{-moz-transform:perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function:ease-out;}50%{-moz-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function:ease-in;}80%{-moz-transform:perspective(400px) rotateY(360deg) scale(0.95);-moz-animation-timing-function:ease-in;}100%{-moz-transform:perspective(400px) scale(1);-moz-animation-timing-function:ease-in;}}
@-ms-keyframes Flip{0%{-ms-transform:perspective(400px) rotateY(0deg);-ms-animation-timing-function:ease-out;}40%{-ms-transform:perspective(400px) translateZ(150px) rotateY(170deg);-ms-animation-timing-function:ease-out;}50%{-ms-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-ms-animation-timing-function:ease-in;}80%{-ms-transform:perspective(400px) rotateY(360deg) scale(0.95);-ms-animation-timing-function:ease-in;}100%{-ms-transform:perspective(400px) scale(1);-ms-animation-timing-function:ease-in;}}
@keyframes Flip{0%{transform:perspective(400px) rotateY(0deg);animation-timing-function:ease-out;}40%{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out;}50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in;}80%{transform:perspective(400px) rotateY(360deg) scale(0.95);animation-timing-function:ease-in;}100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in;}}

/*X翻转入*/
@-webkit-keyframes FlipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;}40%{-webkit-transform:perspective(400px) rotateX(-10deg);}70%{-webkit-transform:perspective(400px) rotateX(10deg);}100%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1;}}
@-moz-keyframes FlipInX{0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;}40%{-moz-transform:perspective(400px) rotateX(-10deg);}70%{-moz-transform:perspective(400px) rotateX(10deg);}100%{-moz-transform:perspective(400px) rotateX(0deg);opacity:1;}}
@-ms-keyframes FlipInX{0%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;}40%{-ms-transform:perspective(400px) rotateX(-10deg);}70%{-ms-transform:perspective(400px) rotateX(10deg);}100%{-ms-transform:perspective(400px) rotateX(0deg);opacity:1;}}
@keyframes FlipInX{0%{transform:perspective(400px) rotateX(90deg);opacity:0;}40%{transform:perspective(400px) rotateX(-10deg);}70%{transform:perspective(400px) rotateX(10deg);}100%{transform:perspective(400px) rotateX(0deg);opacity:1;}}

/*Y翻转入*/
@-webkit-keyframes FlipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;}40%{-webkit-transform:perspective(400px) rotateY(-10deg);}70%{-webkit-transform:perspective(400px) rotateY(10deg);}100%{-webkit-transform:perspective(400px) rotateY(0deg);opacity:1;}}
@-moz-keyframes FlipInY{0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;}40%{-moz-transform:perspective(400px) rotateY(-10deg);}70%{-moz-transform:perspective(400px) rotateY(10deg);}100%{-moz-transform:perspective(400px) rotateY(0deg);opacity:1;}}
@-ms-keyframes FlipInY{0%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;}40%{-ms-transform:perspective(400px) rotateY(-10deg);}70%{-ms-transform:perspective(400px) rotateY(10deg);}100%{-ms-transform:perspective(400px) rotateY(0deg);opacity:1;}}
@keyframes FlipInY{0%{transform:perspective(400px) rotateY(90deg);opacity:0;}40%{transform:perspective(400px) rotateY(-10deg);}70%{transform:perspective(400px) rotateY(10deg);}100%{transform:perspective(400px) rotateY(0deg);opacity:1;}}

/*X翻转出*/
@-webkit-keyframes FlipOutX{0%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1;}100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;}}
@-moz-keyframes FlipOutX{0%{-moz-transform:perspective(400px) rotateX(0deg);opacity:1;}100%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;}}
@-ms-keyframes FlipOutX{0%{-ms-transform:perspective(400px) rotateX(0deg);opacity:1;}100%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;}}
@keyframes FlipOutX{0%{transform:perspective(400px) rotateX(0deg);opacity:1;}100%{transform:perspective(400px) rotateX(90deg);opacity:0;}}

/*Y翻转出*/
@-webkit-keyframes FlipOutY{0%{-webkit-transform:perspective(400px) rotateY(0deg);opacity:1;}100%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;}}
@-moz-keyframes FlipOutY{0%{-moz-transform:perspective(400px) rotateY(0deg);opacity:1;}100%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;}}
@-ms-keyframes FlipOutY{0%{-ms-transform:perspective(400px) rotateY(0deg);opacity:1;}100%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;}}
@keyframes FlipOutY{0%{transform:perspective(400px) rotateY(0deg);opacity:1;}100%{transform:perspective(400px) rotateY(90deg);opacity:0;}}

/*闪烁*/
@-webkit-keyframes Flash{33%,100%{opacity:1;}0%,66%{opacity:0;}}
@-moz-keyframes Flash{33%,100%{opacity:1;}0%,66%{opacity:0;}}
@-ms-keyframes Flash{33%,100%{opacity:1;}0%,66%{opacity:0;}}
@keyframes Flash{33%,100%{opacity:1;}0%,66%{opacity:0;}}

/*响铃*/
@-webkit-keyframes Tada{0%{opacity:0;}1%{opacity:1;-webkit-transform:scale(1);transform:scale(1);}10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg);}30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg);}40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg);}100%{-webkit-transform:scale(1) rotate(0deg);transform:scale(1) rotate(0deg);}}
@-moz-keyframes Tada{0%{opacity:0;}1%{opacity:1;-moz-transform:scale(1);transform:scale(1);}10%,20%{-moz-transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg);}30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg);}40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg);}100%{-moz-transform:scale(1) rotate(0deg);transform:scale(1) rotate(0deg);}}
@-ms-keyframes Tada{0%{-ms-transform:scale(1);transform:scale(1);}10%,20%{-ms-transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg);}30%,50%,70%,90%{-ms-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg);}40%,60%,80%{-ms-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg);}100%{-ms-transform:scale(1) rotate(0deg);transform:scale(1) rotate(0deg);}}
@keyframes Tada{0%{transform:scale(1);transform:scale(1);}10%,20%{transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg);}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg);}40%,60%,80%{transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg);}100%{transform:scale(1) rotate(0deg);transform:scale(1) rotate(0deg);}}

/*左右摇晃*/
@-webkit-keyframes Shake{0%{opacity:0;}1%,100%{opacity:1;-webkit-transform:translateX(0);}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);}20%,40%,60%,80%{-webkit-transform:translateX(10px);}}
@-moz-keyframes Shake{0%{opacity:0;}1%,100%{opacity:1;-moz-transform:translateX(0);}10%,30%,50%,70%,90%{-moz-transform:translateX(-10px);}20%,40%,60%,80%{-moz-transform:translateX(10px);}}
@-ms-keyframes Shake{1%,100%{-ms-transform:translateX(0);}10%,30%,50%,70%,90%{-ms-transform:translateX(-10px);}20%,40%,60%,80%{-ms-transform:translateX(10px);}}
@keyframes Shake{1%,100%{transform:translateX(0);}10%,30%,50%,70%,90%{transform:translateX(-10px);}20%,40%,60%,80%{transform:translateX(10px);}}


/*摇曳*/
@-webkit-keyframes Wobble{0%{-webkit-transform:translateX(0);}15%{-webkit-transform:translateX(-100px) rotate(-5deg);}30%{-webkit-transform:translateX(80px) rotate(3deg);}45%{-webkit-transform:translateX(-65px) rotate(-3deg);}60%{-webkit-transform:translateX(40px) rotate(2deg);}75%{-webkit-transform:translateX(-20px) rotate(-1deg);}100%{-webkit-transform:translateX(0);}}
@-moz-keyframes Wobble{0%{-moz-transform:translateX(0);}15%{-moz-transform:translateX(-100px) rotate(-5deg);}30%{-moz-transform:translateX(80px) rotate(3deg);}45%{-moz-transform:translateX(-65px) rotate(-3deg);}60%{-moz-transform:translateX(40px) rotate(2deg);}75%{-moz-transform:translateX(-20px) rotate(-1deg);}100%{-moz-transform:translateX(0);}}
@-ms-keyframes Wobble{0%{-ms-transform:translateX(0);}15%{-ms-transform:translateX(-100px) rotate(-5deg);}30%{-ms-transform:translateX(80px) rotate(3deg);}45%{-ms-transform:translateX(-65px) rotate(-3deg);}60%{-ms-transform:translateX(40px) rotate(2deg);}75%{-ms-transform:translateX(-20px) rotate(-1deg);}100%{-ms-transform:translateX(0);}}
@keyframes Wobble{0%{transform:translateX(0);}15%{transform:translateX(-100px) rotate(-5deg);}30%{transform:translateX(80px) rotate(3deg);}45%{transform:translateX(-65px) rotate(-3deg);}60%{transform:translateX(40px) rotate(2deg);}75%{transform:translateX(-20px) rotate(-1deg);}100%{transform:translateX(0);}}


/*橡皮筋*/
@-webkit-keyframes RubberBand{0%{opacity:0;}1%{opacity:1;-webkit-transform:scale(1);transform:scale(1);}30%{-webkit-transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75);}40%{-webkit-transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25);}60%{-webkit-transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85);}100%{-webkit-transform:scale(1);transform:scale(1);}}
@-moz-keyframes RubberBand{0%{opacity:0;}1%{opacity:1;-moz-transform:scale(1);transform:scale(1);}30%{-moz-transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75);}40%{-moz-transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25);}60%{-moz-transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85);}100%{-moz-transform:scale(1);transform:scale(1);}}
@-ms-keyframes RubberBand{0%{-ms-transform:scale(1);transform:scale(1);}30%{-ms-transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75);}40%{-ms-transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25);}60%{-ms-transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85);}100%{-ms-transform:scale(1);transform:scale(1);}}
@keyframes RubberBand{0%{transform:scale(1);transform:scale(1);}30%{transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75);}40%{transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25);}60%{transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85);}100%{transform:scale(1);transform:scale(1);}}

/*滑入*/
@-webkit-keyframes LightSpeedIn{0%{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0;}60%{-webkit-transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1;}80%{-webkit-transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1;}100%{-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1;}}
@-ms-keyframes LightSpeedIn{0%{-ms-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0;}60%{-ms-transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1;}80%{-ms-transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1;}100%{-ms-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1;}}
@-moz-keyframes LightSpeedIn{0%{-moz-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0;}60%{-moz-transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1;}80%{-moz-transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1;}100%{-moz-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1;}}
@keyframes LightSpeedIn{0%{transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0;}60%{transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1;}80%{transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1;}100%{transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1;}}

/*滑出*/
@-webkit-keyframes LightSpeedOut{0%{-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1;}100%{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0;}}
@-moz-keyframes LightSpeedOut{0%{-moz-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1;}100%{-moz-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0;}}
@-ms-keyframes LightSpeedOut{0%{-ms-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1;}100%{-ms-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0;}}
@keyframes LightSpeedOut{0%{transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1;}100%{transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0;}}

/*弧线 渐收 弧线 循环移动*/
@-webkit-keyframes rotateLoopAnimation{
0%{opacity:1;-webkit-transform:translateX(-100px) rotate(-5deg)}
100%{opacity:1;-webkit-transform:translateX(1px) rotate(0deg)}
}

@-moz-keyframes rotateLoopAnimation{
0%{opacity:1;-moz-transform:translateX(-100px) rotate(-5deg)}
100%{opacity:1;-moz-transform:translateX(1px) rotate(0deg)}
}

/*超人移动*/
@-webkit-keyframes diagonalAnimation {
0%{opacity:0;-webkit-transform:translateY(800px);}
100%{opacity:1;-webkit-transform:translateY(0px);}
}

@-moz-keyframes diagonalAnimation {
0%{opacity:1;-moz-transform:translateY(0px)}
100%{opacity:1;-moz-transform:translateY(-600px)}
}

/*上下移动*/
@-webkit-keyframes yLoopAnimation {
0%{opacity:1;-webkit-transform:translateY(-200px)}
100%{opacity:1;-webkit-transform:translateY(0)}}

@-moz-keyframes yLoopAnimation {
0%{opacity:1;-moz-transform:translateY(-200px)}
100%{opacity:1;-moz-transform:translateY(0)}
}

/*X翻转转*/
@-webkit-keyframes MyFlipInX{
0%{-webkit-transform:perspective(400px) rotateX(-270deg);opacity:0;}
100%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1;}
}

@-moz-keyframes MyFlipInX{
0%{-webkit-transform:perspective(400px) rotateX(-270deg);opacity:0;}
100%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1;}
}

@-webkit-keyframes xLoopAnimation {
0%{opacity:1;-webkit-transform:rotate(0deg)}
50%{opacity:1;-webkit-transform:rotate(180deg)}
100%{opacity:1;-webkit-transform:rotate(360deg)}
}

@-webkit-keyframes xLoopAnimation2 {
0%{opacity:0;-webkit-transform:rotate(0deg)}
1%{opacity:0;-webkit-transform:rotate(0deg)}
2%{opacity:1;-webkit-transform:rotate(4deg)}
50%{opacity:1;-webkit-transform:rotate(180deg)}
100%{opacity:1;-webkit-transform:rotate(360deg)}
}



/*反旋转 */
@-webkit-keyframes rotateAnimation{
0%{opacity:1;-webkit-transform:rotate(360deg)}
100%{opacity:1;-webkit-transform:rotate(0deg)}
}

@-moz-keyframes rotateAnimation{
0%{opacity:1;-moz-transform:rotate(360deg)}
100%{opacity:1;-moz-transform:rotate(0deg)}
}

/*秋千swing*/
@-webkit-keyframes swingAnimation{
0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0}
40%{-webkit-transform:perspective(400px) rotateX(-20deg)}
70%{-webkit-transform:perspective(400px) rotateX(20deg)}
100%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1}
}

@-moz-keyframes swingAnimation{
0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0}
40%{-moz-transform:perspective(400px) rotateX(-10deg)}
70%{-moz-transform:perspective(400px) rotateX(10deg)}
100%{-moz-transform:perspective(400px) rotateX(0deg);opacity:1}
}  

/*汽车开动*/
@-webkit-keyframes carAnimation {
0%{opacity:0;}	
60%{opacity:1;right:20%;top:380px;width:10%;}
100%{opacity:1;right:40%;top:420px;width:35%;}
}

@-moz-keyframes carAnimation{
0%{right:20%;top:380px;width:10%;}
100%{right:40%;top:420px;width:35%;}
}


/*云层*/
@-webkit-keyframes cloudsAnimation {
0%{opacity:0;-webkit-transform:translateX(0px) }
50%{opacity:1;-webkit-transform:translateX(80px) rotate(25deg)}
100%{opacity:1;-webkit-transform:translateX(-80px) rotate(-25deg)}
}

@-moz-keyframes cloudsAnimation {
0%{opacity:0;-moz-transform:translateX(0px)}
50%{opacity:1;-moz-transform:translateX(80px)}
100%{opacity:1;-moz-transform:translateX(-80px)}
}

/*标题*/
@-webkit-keyframes titleAnimation {
0%{opacity:0;-webkit-transform:translateX(60px) rotate(25deg)}
10%{opacity:1;-webkit-transform:translateX(-50px) rotate(-25deg)}
20%{opacity:1;-webkit-transform:translateX(40px) rotate(20deg)}
30%{opacity:1;-webkit-transform:translateX(-30px) rotate(-15deg)}
40%{opacity:1;-webkit-transform:translateX(20px) rotate(10deg)}
50%{opacity:1;-webkit-transform:translateX(-10px) rotate(-5deg)}
60%{opacity:1;-webkit-transform:translateX(0) rotate(0deg)}
70%{opacity:1;-webkit-transform:translateX(0) rotate(0deg)}
80%{opacity:1;-webkit-transform:translateX(0) rotate(0deg)}
90%{opacity:1;-webkit-transform:translateX(0) rotate(0deg)}
100%{opacity:1;}
}

@-moz-keyframes titleAnimation {
0%{opacity:0;-moz-transform:translateX(0px)}
50%{opacity:1;-moz-transform:translateX(80px)}
100%{opacity:1;-moz-transform:translateX(-80px)}
}




@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,-100%,0);
		transform: translate3d(0,-100%,0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,-100%,0);
		-ms-transform: translate3d(0,-100%,0);
		transform: translate3d(0,-100%,0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none
	}
}


@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,100%,0);
		transform: translate3d(0,100%,0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,100%,0);
		-ms-transform: translate3d(0,100%,0);
		transform: translate3d(0,100%,0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none
	}
}



@-webkit-keyframes bounceIn {
	0%,100%,20%,40%,60%,80% {
		-webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
		transition-timing-function: cubic-bezier(0.215,.61,.355,1)
	}

	0% {
		opacity: 0;
		-webkit-transform: scale3d(.3,.3,.3);
		transform: scale3d(.3,.3,.3)
	}

	20% {
		-webkit-transform: scale3d(1.1,1.1,1.1);
		transform: scale3d(1.1,1.1,1.1)
	}

	40% {
		-webkit-transform: scale3d(.9,.9,.9);
		transform: scale3d(.9,.9,.9)
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(1.03,1.03,1.03);
		transform: scale3d(1.03,1.03,1.03)
	}

	80% {
		-webkit-transform: scale3d(.97,.97,.97);
		transform: scale3d(.97,.97,.97)
	}

	100% {
		opacity: 1;
		-webkit-transform: scale3d(1,1,1);
		transform: scale3d(1,1,1)
	}
}

@keyframes bounceIn {
	0%,100%,20%,40%,60%,80% {
		-webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
		transition-timing-function: cubic-bezier(0.215,.61,.355,1)
	}

	0% {
		opacity: 0;
		-webkit-transform: scale3d(.3,.3,.3);
		-ms-transform: scale3d(.3,.3,.3);
		transform: scale3d(.3,.3,.3)
	}

	20% {
		-webkit-transform: scale3d(1.1,1.1,1.1);
		-ms-transform: scale3d(1.1,1.1,1.1);
		transform: scale3d(1.1,1.1,1.1)
	}

	40% {
		-webkit-transform: scale3d(.9,.9,.9);
		-ms-transform: scale3d(.9,.9,.9);
		transform: scale3d(.9,.9,.9)
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(1.03,1.03,1.03);
		-ms-transform: scale3d(1.03,1.03,1.03);
		transform: scale3d(1.03,1.03,1.03)
	}

	80% {
		-webkit-transform: scale3d(.97,.97,.97);
		-ms-transform: scale3d(.97,.97,.97);
		transform: scale3d(.97,.97,.97)
	}

	100% {
		opacity: 1;
		-webkit-transform: scale3d(1,1,1);
		-ms-transform: scale3d(1,1,1);
		transform: scale3d(1,1,1)
	}
}

@-webkit-keyframes bounceInUp {
	0%,100%,60%,75%,90% {
		-webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
		transition-timing-function: cubic-bezier(0.215,.61,.355,1)
	}

	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,3000px,0);
		transform: translate3d(0,3000px,0)
	}

	60% {
		opacity: 1;
		-webkit-transform: translate3d(0,-20px,0);
		transform: translate3d(0,-20px,0)
	}

	75% {
		-webkit-transform: translate3d(0,10px,0);
		transform: translate3d(0,10px,0)
	}

	90% {
		-webkit-transform: translate3d(0,-5px,0);
		transform: translate3d(0,-5px,0)
	}

	100% {
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0)
	}
}

@keyframes bounceInUp {
	0%,100%,60%,75%,90% {
		-webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
		transition-timing-function: cubic-bezier(0.215,.61,.355,1)
	}

	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,3000px,0);
		-ms-transform: translate3d(0,3000px,0);
		transform: translate3d(0,3000px,0)
	}

	60% {
		opacity: 1;
		-webkit-transform: translate3d(0,-20px,0);
		-ms-transform: translate3d(0,-20px,0);
		transform: translate3d(0,-20px,0)
	}

	75% {
		-webkit-transform: translate3d(0,10px,0);
		-ms-transform: translate3d(0,10px,0);
		transform: translate3d(0,10px,0)
	}

	90% {
		-webkit-transform: translate3d(0,-5px,0);
		-ms-transform: translate3d(0,-5px,0);
		transform: translate3d(0,-5px,0)
	}

	100% {
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0)
	}
}

@-webkit-keyframes bounceInDown {
	0%,100%,60%,75%,90% {
		-webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
		transition-timing-function: cubic-bezier(0.215,.61,.355,1)
	}

	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,-3000px,0);
		transform: translate3d(0,-3000px,0)
	}

	60% {
		opacity: 1;
		-webkit-transform: translate3d(0,25px,0);
		transform: translate3d(0,25px,0)
	}

	75% {
		-webkit-transform: translate3d(0,-10px,0);
		transform: translate3d(0,-10px,0)
	}

	90% {
		-webkit-transform: translate3d(0,5px,0);
		transform: translate3d(0,5px,0)
	}

	100% {
		-webkit-transform: none;
		transform: none
	}
}

@keyframes bounceInDown {
	0%,100%,60%,75%,90% {
		-webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
		transition-timing-function: cubic-bezier(0.215,.61,.355,1)
	}

	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,-3000px,0);
		-ms-transform: translate3d(0,-3000px,0);
		transform: translate3d(0,-3000px,0)
	}

	60% {
		opacity: 1;
		-webkit-transform: translate3d(0,25px,0);
		-ms-transform: translate3d(0,25px,0);
		transform: translate3d(0,25px,0)
	}

	75% {
		-webkit-transform: translate3d(0,-10px,0);
		-ms-transform: translate3d(0,-10px,0);
		transform: translate3d(0,-10px,0)
	}

	90% {
		-webkit-transform: translate3d(0,5px,0);
		-ms-transform: translate3d(0,5px,0);
		transform: translate3d(0,5px,0)
	}

	100% {
		-webkit-transform: none;
		-ms-transform: none;
		transform: none
	}
}


@-webkit-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-100%,0,0);
		transform: translate3d(-100%,0,0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-100%,0,0);
		-ms-transform: translate3d(-100%,0,0);
		transform: translate3d(-100%,0,0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none
	}
}


@-webkit-keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(100%,0,0);
		transform: translate3d(100%,0,0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(100%,0,0);
		-ms-transform: translate3d(100%,0,0);
		transform: translate3d(100%,0,0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none
	}
}


@-webkit-keyframes bounceIn {
	0%,100%,20%,40%,60%,80% {
		-webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
		transition-timing-function: cubic-bezier(0.215,.61,.355,1)
	}

	0% {
		opacity: 0;
		-webkit-transform: scale3d(.3,.3,.3);
		transform: scale3d(.3,.3,.3)
	}

	20% {
		-webkit-transform: scale3d(1.1,1.1,1.1);
		transform: scale3d(1.1,1.1,1.1)
	}

	40% {
		-webkit-transform: scale3d(.9,.9,.9);
		transform: scale3d(.9,.9,.9)
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(1.03,1.03,1.03);
		transform: scale3d(1.03,1.03,1.03)
	}

	80% {
		-webkit-transform: scale3d(.97,.97,.97);
		transform: scale3d(.97,.97,.97)
	}

	100% {
		opacity: 1;
		-webkit-transform: scale3d(1,1,1);
		transform: scale3d(1,1,1)
	}
}

@keyframes bounceIn {
	0%,100%,20%,40%,60%,80% {
		-webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
		transition-timing-function: cubic-bezier(0.215,.61,.355,1)
	}

	0% {
		opacity: 0;
		-webkit-transform: scale3d(.3,.3,.3);
		-ms-transform: scale3d(.3,.3,.3);
		transform: scale3d(.3,.3,.3)
	}

	20% {
		-webkit-transform: scale3d(1.1,1.1,1.1);
		-ms-transform: scale3d(1.1,1.1,1.1);
		transform: scale3d(1.1,1.1,1.1)
	}

	40% {
		-webkit-transform: scale3d(.9,.9,.9);
		-ms-transform: scale3d(.9,.9,.9);
		transform: scale3d(.9,.9,.9)
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(1.03,1.03,1.03);
		-ms-transform: scale3d(1.03,1.03,1.03);
		transform: scale3d(1.03,1.03,1.03)
	}

	80% {
		-webkit-transform: scale3d(.97,.97,.97);
		-ms-transform: scale3d(.97,.97,.97);
		transform: scale3d(.97,.97,.97)
	}

	100% {
		opacity: 1;
		-webkit-transform: scale3d(1,1,1);
		-ms-transform: scale3d(1,1,1);
		transform: scale3d(1,1,1)
	}
}



@-webkit-keyframes scale-to-zero-with-center {
    0% {
        -webkit-transform: translate3d(-50%, 0, 0) scale(20);
        opacity: 0;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        -webkit-transform: translate3d(-50%, 0, 0) scale(1);
        opacity: 1;
    }
}


